<!--
 * @Author: Leng
 * @Date: 2022-11-22 11:07:31
 * @Description: 淘宝订单
 * @Description: BEM:https://getbem.com, 由Yandex公司推出的一套CSS命名规范
 * @FilePath: \vue-leng\src\components\module\tbOrder\index.vue
-->

<template>
    <div class="tb-order-content">
    <div class="tb-order">
          <div class="tb-order__hd">
              <span class="tb__title">我的订单</span>
              <span class="tb__more">全部 ></span>
          </div>
          <div class="tb-order__bd">
              <a href="#" class="tb-order__item">
                  <span>
                      <i class="iconfont icon-daifukuan"></i>
                      <span class="tb__pointer"></span>
                  </span>
                  <p class="tb__desc">待付款</p>
              </a>
              <a href="#" class="tb-order__item">
                  <span>
                      <i class="iconfont icon-daifahuo"></i>
                      <span class="tb__pointer"></span>
                  </span>
                  <p class="tb__desc">待发货</p>
              </a>
              <a href="#" class="tb-order__item">
                  <span>
                      <i class="iconfont icon-daishouhuo"></i>
                      <span class="tb__pointer tb__pointer_on">2</span>
                  </span>
                  <p class="tb__desc">待收货</p>
              </a>
              <a href="#" class="tb-order__item">
                  <span>
                      <i class="iconfont icon-daipingjia"></i>
                      <span class="tb__pointer tb__pointer_on">8</span>
                  </span>
                  <p class="tb__desc">待评价</p>
              </a>
              <a href="#" class="tb-order__item">
                  <span>
                      <i class="iconfont icon-tuikuan"></i>
                      <span class="tb__pointer"></span>
                  </span>
                  <p class="tb__desc">退款/售后</p>
              </a>
          </div>
   </div>
  </div>
  </template>
  
  <script>
  // 挂载$config
  import VuexConfig from '../../../index'
  let iconUrl = $config.iconfont
  $tool.loadCSS(iconUrl + '.css', null, 'leng-font-css')
  $tool.loadScript(iconUrl + '.js', null, 'leng-font-js')
  console.log('加载iconfont:' + iconUrl)
  
  export default {
    name: 'loginCardName'
  }
  </script>
  <style lang="scss" scoped>
  a{
      text-decoration: none;
  }
  .tb-order-content{
      background-color: #5b80d7;
      padding: 5px;
  }
  .tb-order{
      width:95%;
      margin:10px auto;
      background-color: white;
      border-radius: 20px;
  }
  .tb-order__hd{
      height:63px;
      padding:0 15px;
      display: flex;
      justify-content: space-between;
      align-items: center;
  }
  .tb__title{
      font-size: 20px;
      font-weight:bold;
      /* line-height:63px; */
  }
  .tb__more{
      font-size:16px;
      color:gray;
  }
  .tb-order__bd{
      height:84px;
      display: flex;
      justify-content: space-around;
  }
  .tb-order__item{
      width:20%;
      text-align: center;
      line-height: 20px;
      color:black;
      position: relative;
  }
  .iconfont{
      font-size: 30px;
      font-weight: 550;
  }
  .tb__desc{
      font-size: 14px;
  }
  .tb__pointer{
      width:22px;
      height:22px;
      position: absolute;
      display: inline-block;
      color:white;
      top:-9px;
      right:18px;
      border-radius: 50%;
      line-height: 22px;
      font-size:11px;
      font-weight: 550;
  }
  .tb__pointer_on{
     background-color: #ff7302;
  }
  </style>